<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有事留言</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body{
            background:#2d3b36 url(images/back.jpg)no-repeat center center fixed;
            background-size: cover;
            padding-top:10px;
        }

        form {
            margin-left:480px;
            margin-right:auto;
            margin-top: 100px;
            width: 343px;
            height: 353px;
            padding:30px;
            border: 1px solid rgba(83, 83, 135, 0.3);
            border-radius: 5px;
            background-clip: padding-box;
            background: rgba(83, 83, 135, 0.5);
            box-shadow: 0 0 13px 3px rgba(83, 83, 135,0.3);
            overflow: hidden;
        }
        input {
            width: 276px;
            height: 48px;
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 4px;
            background-clip: padding-box;
            display:block;
            font-family: 'Source Sans Pro', sans-serif;
            font-size:18px;
            color:#fff;
            padding-left:20px;
            padding-right:20px;
            margin-bottom:20px;
        }
        input[type=submit] {
            cursor:pointer;
        }
        input.name {
            background: rgba(255, 255, 255, 0.3)  no-repeat scroll 16px 16px;
            padding-left:45px;
        }
        input.email {
            background: rgba(255, 255, 255, 0.3) no-repeat scroll 16px 20px;
            padding-left:45px;
        }
        textarea{
            background: rgba(255, 255, 255, 0.3)   no-repeat scroll 16px 16px;
            width: 276px;
            height: 110px;
            border: 1px solid rgba(255,255,255,.6);
            border-radius: 4px;
            background-clip: padding-box;
            display:block;
            font-family: 'Source Sans Pro', sans-serif;
            font-size:18px;
            color:#fff;
            padding-left:45px;
            padding-right:20px;
            padding-top:12px;
            margin-bottom:20px;
            overflow:hidden;
        }
        input:focus, textarea:focus {
            background-color: rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
            overflow: hidden;
        }
        .btn {
            width: 138px;
            height: 55px;
            border-radius: 4px;
            float:right;
            border: 1px solid #253737;
            font-weight: bolder;
            font-size: x-large;
            background-color: #008B8B;
            padding: 11px 21px;
            border-radius: 6px;
            box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
            text-shadow: #333333 0 1px 0;
            color: #e1e1e1;


        }
        .btn:hover {
            border: 1px solid #253737;
            text-shadow: #333333 0 1px 0;
            background: #416b68;
            color: #fff;
        }
        .btn:active {
            margin-top:1px;
            text-shadow: #333333 0 -1px 0;
            border: 1px solid #253737;
            background: #6da5a3;
            color: #fff;
            box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
        }
        label{
            margin-top: -15px;
            margin-left: 50px;
            height: 30px;
            float: left;
            font-size: large;
            color:red;
        }
        .time{
            display: inline-block;
            background-color:rgba(255,255,255,0);
            height: 100px;
            width: 300px;
            margin:200px 50px;
            font-weight: bold;
            float: right;
        }
        .month{
            float: left;
            margin-left: -50px;
            margin-top: 150px;
            font-size: large;
            font-weight: bold;
        }
        .table1{ background-color:rgba(255,255,255,0);}
        .table1 td{
            width: 45px;
            height: 40px;
            text-align: center;
        }
        p {
            margin-left: 0px;
            margin-top: 30px;
            line-height: 50px;
            font-size: 30px;
            font-family: "隶书";
        }
        .footer {
            margin-top: 80px;
            height: 40px;
            line-height: 40px;
            position: relative;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #000;
            font-family: Arial;
            font-size: 20px;
            letter-spacing: 1px;
        }
        .button{
            width: 100px;
            height: 30px;
            font-weight: bolder;
            font-size: larger;
            border-radius: 4px;
            background-color: #008B8B;
            float:left;
        }
    </style>
    <script src="js/formCheck.js"></script>
    <script src="js/Calendar.js"></script>
</head>
<body>
    <input class="button" name="Submit " type="submit" value="返回" onclick="javascript:history.back()" />
    <div class="time">
        <p>愿世俗多点温柔，<br>
            愿你少点难过。</p>
        <p id="text"></p>
    </div>
    <div class="month">
        <table class="table1">
            <tr>
                <td colspan="7" id="date"></td>
            </tr>
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
            <tr id="line1"></tr>
            <tr id="line2"></tr>
            <tr id="line3"></tr>
            <tr id="line4"></tr>
            <tr id="line5"></tr>
            <tr id="line6"></tr>
        </table>
    </div>
    <form action="javascript:location">
        <input name="name" id="name" placeholder="请留下大侠大名......" class="name"  />
        <label id="label1" style="visibility:visible;"></label>
        <input name="emailAddress" id="emailAddress" placeholder="请留下大侠邮件地址......" class="email" type="email"  />
        <label id="label2" style="visibility:visible;"></label>
        <textarea id="message" rows="4" cols="50" name="subject" placeholder="大侠请畅所欲言......" class="message" ></textarea>
        <label id="label3" style="visibility:visible;"></label>
        <input name="submit" class="btn" type="submit" value="发送" onclick="return validForm()" />
    </form>
    <div class="footer">
        ©2020-2021  谢娇(6109118015) 版权所有
    </div>
</body>
</html>